<template>
  <div>
    <top-nav/>
    <div class="demo-list">
      <div style="margin-bottom: 20px;color: #666">演示列表:</div>
      <ul>
        <li v-for="(item,index) in demoList" :key="index">
          <div class="item" @click="showDemo(item)">{{item.name}}</div>
        </li>
      </ul>
    </div>
    <!-- <template>
      <div v-for="(item, index) in domList" :key="index">
        <component :is="item.el" v-model="domForm[item.prop]">
          <component
            v-for="subItem in item.subEl"
            :key="subItem.value"
            :is="subItem.el"
            v-bind="subItem.elOption || {}"
            :label="subItem.label"
            :value="subItem.value"
          />
        </component>
      </div>
      <el-button @click="onBtn">提交</el-button>
    </template> -->
  </div>
</template>
<script>
import {demoList} from '@/utils/demoData.js'
import topNav from '@/components/topNav'
const LIST_COMP = ['el-checkbox-group']
export default{
  components: {
    topNav
  },
  data() {
    return {
      demoList: demoList,
      domList: [
        {
          el: 'el-input',
          prop: 'name',
          defaultValue: '1'
        },
        {
          el: 'el-radio-group',
          prop: 'radio',
          defaultValue: '1',
          subEl: [
            {
              el: 'el-radio',
              label: '按钮1',
              value: '1',
              elOption: {
                disabled: true
              }
            },
            {
              el: 'el-radio',
              label: '按钮2',
              value: '2'
            }
          ]
        },
        {
          el: 'el-input-number',
          prop: 'number',
          min: 1,
          max: 5
        },
        {
          el: 'el-select',
          prop: 'select',
          subEl: [
            {
              el: 'el-option',
              label: '选项1',
              value: '1'
            },
            {
              el: 'el-option',
              label: '选项2',
              value: '2'
            }
          ]
        },
        // {
        //   el: 'el-checkbox-group',
        //   prop: 'checkbox',
        //   defaultValue: ['1'],
        //   subEl: [
        //     {
        //       el: 'el-checkbox',
        //       label: '复选',
        //       value: '1'
        //     }
        //   ]
        // }
      ],
      domForm: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      const formValues = {}
      this.domList.forEach((item) => {
        formValues[item.prop] = !this.isEmptyValue(item.defaultValue)
          ? item.defaultValue
          : LIST_COMP.includes(item.el)
            ? []
            : ''
        // this.rules[item.prop] = item.rule || (this.formOptions.rules && this.formOptions.rules[item.prop]) || []
      })
      console.log(formValues)
      // this.form = deepClone(formValues)

      // validator(values) {
      //   const result = validators.some(el => {
      //     if (el.required && !values[el.key]) {
      //       this.$message.error(el.message);
      //       return true;
      //     }
      //   });
      //   return result;
      // },
      // submit(values) {
      //   if (this.validator(values)) {
      //     return;
      //   }

      //   // ... 调用接口
      // }
    },
    isEmptyValue(value) {
      if (Array.isArray(value)) {
        return !value.length
      }
      if (value === 0) {
        return false
      }
      return !value
    },
    showDemo(e) {
      const curPath = this.$router.resolve({
        path: '/demo',
        query: {
          id: e.id
        }
      })
      window.open(curPath.href, '_blank')
    },
    onBtn() {
      console.log({...this.domForm})
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 20px;
  ul{
    padding: 0;
    margin: 0;
    margin-left: -10px;
    margin-right: -10px;
    li{
      margin: 0;
      padding: 0;
      padding-left: 10px;
      padding-right: 10px;
      list-style-type: none;
      display: inline-block;
      position: relative;
      .item{
        margin-bottom: 10px;
        cursor: pointer;
        &:hover{
          color: blue;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>